<template>
    <div>
      <div id="main1" style="width: 800px;height:400px;"></div>
    </div>  
  </template>
  <script>
    import * as echarts from 'echarts';
    export default {
        data(){
            return{
                sexData: [
                    {
                        type: 'bar',
                        data: [48000, 49000, 47000, 40000, 27000, 44000]
                    }
                ],
            }
        },
        mounted() {
            this.ageChart();
        },
        methods:{
            ageChart() {
            var myChart = echarts.init(document.getElementById('main1'));
            var option = {
                title: {
                    text: '年龄分布'
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                legend: {},
                color: "rgb(71,137,246)",
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: {
                    type: 'value',
                    boundaryGap: [0, 1]
                },
                yAxis: {
                        type: 'category',
                        data: this.ageYdata
                    },
                    series: this.sexData
                };
  
                myChart.setOption(option);
            },
        }    
    }
  </script>